<%@page import="java.util.Date"%>
<%@page import="java.util.List"%>
<%@page import="com.moefor.clover.model.Message"%>
<%@page import="java.util.Set"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/jquery-labelauty.css" rel="stylesheet">
<link href="res/css/messenger.css" rel="stylesheet">
<link href="res/css/messenger-theme-block.css" rel="stylesheet">
<style>
body {
	padding-bottom: 30px;
	background: url(res/img/background.gif) repeat 0 0;
}
/***********************nva****************************/
.nav-item:hover {
	background-color: #F0F0F0 !important;
}

.active .nav-item:hover {
	background-color: #e7e7e7 !important;
	cursor: pointer;
}

.glyphicon {
	top: 3px;
}

.open .dropdown-toggle {
	background: #FFF !important;
}

.dropdown-menu {
	border: 0px;
	margin-top: -1px !important;
}

.dropdown-menu a {
	text-align: center;
}

.control {
	padding: 3px 0px;
	text-align: center;
}

.control a {
	display: inline-block !important;
	width: 60px;
	padding: 0px !important;
	color: #888 !important;
}

#msgs .dropdown-header {
	text-align: center;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.msg-item {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.msg-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block !important;
	padding: 0 5px !important;
}

#user-icon a {
	padding: 3px 0 !important;
}

#user-icon a:hover {
	background-color: #FFF;
}
/***********************nva****************************/
/***********************search-box****************************/
.search-box {
	width: 100%;
	height: 100%;
}

.search-box select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-progress-appearance: none;
	border: solid 3px #FB9000;
	border-right: 0;
	width: 80px;
	height: 100%;
	float: left;
	outline: none;
	background-color: #F5F5F5;
	color: #777;
	padding: 0 10px;
	background-image: url(res/img/down-tag.png);
	background-repeat: no-repeat;
	background-position: right;
}

.search-box select option {
	background-color: #FFF;
}

.search-box input[type="text"] {
	border: solid 3px #FB9000;
	width: calc();
	width: -moz-calc(100% -180px);
	width: -webkit-calc(100% - 180px);
	height: 100%;
	outline: none;
	padding: 0px 5px;
	float: left;
	border-right: 0;
	border-left: 0;
}

.search-box input[type="submit"] {
	width: 100px;
	height: 100%;
	border: 0;
	background-color: #FB9000;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.search-box input[type="submit"]:hover {
	background-color: #FDAC3F;
}
/***********************search-box****************************/

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/
.user-icon {
	width: 150px;
	height: 150px;
	background: url("res/img/default.jpg") no-repeat center;
	background-size: cover;
	cursor: pointer;
	vertical-align: bottom;
	display: inline-block;
}

.change-btn {
	display: inline-block;
	margin-left: 10px;
	cursor: pointer;
	padding: 5px 10px;
	background-color: #FB9000;
	color: #fff;
	border-radius: 3px;
}

.user-info {
	list-style-type: none;
	font-size: 18px;
	font-family: "Microsoft YaHei";
	padding: 10px 0;
	color: #888;
}

.user-info li {
	height: 47px;
	line-height: 47px;
	display: block;
	border-bottom: solid 1px #ccc;
}

.user-info input {
	border: 0px;
	padding: 0px 5px;
	height: 31px;
	line-height: 31px;
	display: inline-block;
	width: 190px;
}

.comment-group {
	padding: 10px;
}

.comment-group-item {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #222;
	font-size: 13px;
	line-height: 1.7;
	padding: 10px 0;
	word-wrap: break-word;
	list-style: none;
	border-bottom: solid 1px #ddd;
}

.commenter-icon {
	width: 50px;
	height: 50px;
	vertical-align: top;
	background: url("res/img/default.jpg") no-repeat center;
	background-size: cover;
	vertical-align: top;
}

.comment-detail {
	padding-left: 10px;
	width: calc(100% - 70x);
	width: -moz-calc(100% - 70px);
	width: -webkit-calc(100% - 70px);
	margin-bottom: -7px;
	display: inline-block;
}

.comment-detail div {
	padding-bottom: 3px;
}

.comment-detail span {
	color: #bbb;
}
</style>
</head>

<body>

	<nav id="top" class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img style="float: left; height: 50px;" src="res/img/logo.png" /> <a
					class="navbar-brand" href="home.page">Clover</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<ul id="user-nav" class="nav navbar-nav">
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-user" aria-hidden="true"></span>
							${user.username}<span class="caret"></span></a>
						<ul class="dropdown-menu" style="min-width: 130px;" role="menu">
							<li id="user-icon"><a href="userinfo.page"><img
									class="img-circle"
									style="width:120px;height:120px;background:url(${user.avator.url}) no-repeat center;background-size:cover;"
									id="user-icon" /></a></li>
							<li class="control"><a href="userinfo.page">账号管理</a><a
								href="user/signout.do">注销登陆</a></li>
						</ul></li>
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							消息 <span class="caret"></span></a>
						<ul id="msgs" class="dropdown-menu" role="menu">
							<li class="dropdown-header">未读的新消息</li>
							<%					
     						Object object = request.getAttribute("msgSet");
     						if(object != null && !((Set<Message>)object).isEmpty()){
     							for(Message msg : (Set<Message>)object){
	     							out.print("<li role='separator' class='divider'></li>");
	     							out.print("<li class='msg-item'><span style='width:70%;text-align:left'>"+
	     								msg.getContent()+
	     								"</span><span style='width:30%;'>"+
	     								msg.getSender().getUsername()+	
	     								"</span></li>");
	     							out.print("<li role='separator' class='divider'></li>");
	     						}
     						}else{
     							out.print("<li role='separator' class='divider'></li>"+
     										"<li class='msg-item'><span style='width:70%;text-align:left'>"+
	     									"<span>暂时没有新消息</span>"+
	     									"</span></li>"+
	     									"<li role='separator' class='divider'></li>");						
     						}
     		%>
							<li><a id='checkAll' href="userinfo.page#comment"
								style="width: 100%; text-align: center;">查看全部</a></li>
						</ul></li>
				</ul>


				<ul class="nav navbar-nav navbar-right">
					<li><a class="nav-item" href="deal.page"><span
							class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
							我的交易</a></li>
					<li><a class="nav-item" href="onsale.page"><span
							class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
							我的寄售</a></li>
					<!-- <li><a class="nav-item" href="favorite.page"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 我的收藏</a></li>  -->
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row" style="padding: 30px 0;">
			<div class="col-md-6 col-md-offset-3" style="height: 34px;">
				<form class="search-box">
					<select>
						<option value="goods">商品</option>
						<option value="market">Market</option>
					</select> <input type="text" placeholder="Search"> <input
						type="submit" value="搜索">
				</form>
			</div>
		</div>

		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div
					style="background-color: #fff; box-shadow: 0 0 10px #ccc; padding: 20px;">
					<iframe id='ifm' name='ifm' style="display: none;"></iframe>
					<form action='user/update_avator.do' method='post'
						enctype="multipart/form-data" target='ifm'>
						<img class="user-icon"
							style="background:url(${user.avator.url}) no-repeat center;background-size:cover;">
						<div class="change-btn">更换头像</div>
						<input type="file" name="file" style="display: none;">
					</form>
					<hr>
					<ul class="user-info">
						<li>用户名： &nbsp&nbsp${ user.username}</li>
						<li>手机号： <input type="text" name="phonenum"
							value="${user.tel }"></li>
						<li>E-mail： <input type="text" name="email"
							value="${user.email }"></li>
						<li>密<span style="width: 18px; display: inline-block;"></span>码：
							<input type="password" name="password" value="********"></li>
					</ul>
					<span id="comment" style="color: #888;">历史消息：</span>
					<ul class="comment-group">
						<%
                    	object = request.getAttribute("msgItems");
                    	if(object != null){
                    		for(Message msg : (List<Message>) object){
                    			long tmp = (new Date()).getTime() - msg.getDate().getTime();
        						String date;
        						if((tmp/24/60/60/1000) >= 1){
        							date = tmp/24/60/60/1000 + "天";
        						}else if((tmp/60/60/1000) >= 1){
        							date = tmp/60/60/1000 + "小时";
        						}else if((tmp/60/1000) >= 1){
        							date = tmp/60/1000 + "分钟";
        						}else{
        							date = "1分钟";
        						}
                    			out.print("<li class='comment-group-item'>"+
	                                        "<img class='commenter-icon' style='background:url(" + msg.getSender().getAvator().getUrl() + ") no-repeat center;background-size:cover;'>"+
	                                        "<div class='comment-detail'>"+
	                                            "<div class='comment-header'>"+
	                                                "<a href='allsale.page?userid=" + msg.getSender().getId() + "'>" + msg.getSender().getUsername() + "</a>"+
	                                            "</div>"+
	                                            "<div class='comment-content'>"+
	                                                msg.getContent()+
	                                            "</div>"+
	                                            "<div class='comment-footer'>"+
	                                                "<span>" + date + "前</span>"+
	                                            "</div>"+
	                                        "</div>"+
	                                    "</li>");
                    		}
                    	}
                    %>

					</ul>
				</div>
			</div>
		</div>

		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>

	</div>



	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script src="res/js/jquery-labelauty.js"></script>
	<script src="res/js/messenger.min.js"></script>
	<script type="text/javascript">
		$._messengerDefaults = {
	        extraClasses: 'messenger-fixed messenger-theme-block messenger-on-bottom messenger-on-right'
	    } 
        $(document).ready(function(){
            $('.change-btn').click(function(){
            	$(this).next("input[type='file']").click();
            	
            });
            $('.change-btn').next("input[type='file']").change(function(){
            	$(this).parent().submit();
            });
        	$("#ifm").load(function(){
        		var obj = new Function("return" + $(this).contents().find("body").text())();
        		if(obj.state){
        			$.globalMessenger().post({
                        'message':obj.data,
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
            		setTimeout(function(){
            			location.reload();
            		},1500);
        		}else{
        			$.globalMessenger().post({
                        'message':obj.data,
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
        		}
        	});
        	
            $(".search-box input[type='submit']").click(function(){
            	if($(this).prevAll('select').val() == "goods"){
            		location.href = "home.page#keyword=" + $(this).prevAll("input").val();
            	}else{
            		location.href = "home.page#market=" + $(this).prevAll("input").val();
            	}
            	
            	return false;
            });
            
            $("#checkAll").click(function(){
            	$.ajax({
            		'async':false,
            		'url':'msg/read_all.do'
            	})
            })
        });
    </script>
</body>
</html>